* {
  margin: 0;
  padding: 0;
}

.img-container {
  margin: 100px auto;
  height: 300px;
  width: 300px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  .img-item {
    box-sizing: border-box;
    transition: 0.5s;
    background-size: 300px 300px;
    background-image: url("../img/A.jpeg");
    background-position: var(--bgX, 0) var(--bgY, 0);
    transform: translate(var(--disX, 0), var(--disY, 0));
  }

  &:hover {
    .img-item {
      transform: translate(0, 0);
      box-shadow: inset 0 0 0 0 #fff;
    }
  }
}